<template>
  <div class="history-container">
    <el-page-header title="返回" content="历史记录" />
    
    <div class="history-content">
      <el-empty v-if="!hasHistory" description="暂无历史记录" />
      
      <el-timeline v-else>
        <el-timeline-item
          v-for="(item, index) in historyItems"
          :key="index"
          :timestamp="item.time"
          :type="item.type"
          :color="item.color"
          :hollow="item.hollow"
          placement="top"
        >
          <el-card shadow="hover">
            <template #header>
              <div class="history-card-header">
                <span>{{ item.title }}</span>
                <div>
                  <el-button type="primary" text size="small" @click="viewDetail(item)">查看</el-button>
                  <el-button type="danger" text size="small" @click="deleteItem(index)">删除</el-button>
                </div>
              </div>
            </template>
            <div class="history-card-content">
              <p><strong>源语言:</strong> {{ item.sourceLang }}</p>
              <p><strong>目标语言:</strong> {{ item.targetLang }}</p>
              <p class="history-text">{{ item.text }}</p>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      
      <div class="history-actions" v-if="hasHistory">
        <el-button type="danger" @click="clearHistory">清空历史记录</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue';
import { ElMessageBox } from 'element-plus';

export default defineComponent({
  name: 'HistoryView',
  setup() {
    // 模拟历史记录数据
    const historyItems = ref([
      {
        time: '2023-10-15 14:30',
        title: '英文翻译',
        sourceLang: '中文',
        targetLang: '英文',
        text: 'Hello world! This is a sample translation.',
        type: 'primary',
        color: '#409EFF',
        hollow: false
      },
      {
        time: '2023-10-14 09:15',
        title: '日语翻译',
        sourceLang: '中文',
        targetLang: '日语',
        text: 'こんにちは世界！これはサンプル翻訳です。',
        type: 'success',
        color: '#67C23A',
        hollow: false
      }
    ]);
    
    const hasHistory = computed(() => historyItems.value.length > 0);
    
    const viewDetail = (item: any) => {
      ElMessageBox.alert(item.text, '翻译详情', {
        confirmButtonText: '确定'
      });
    };
    
    const deleteItem = (index: number) => {
      ElMessageBox.confirm('确定要删除这条历史记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        historyItems.value.splice(index, 1);
      }).catch(() => {});
    };
    
    const clearHistory = () => {
      ElMessageBox.confirm('确定要清空所有历史记录吗？此操作不可恢复！', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        historyItems.value = [];
      }).catch(() => {});
    };
    
    return {
      historyItems,
      hasHistory,
      viewDetail,
      deleteItem,
      clearHistory
    };
  }
});
</script>

<style scoped>
.history-container {
  padding: 20px;
  height: 100%;
}

.history-content {
  margin-top: 20px;
}

.history-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.history-card-content {
  font-size: 14px;
}

.history-text {
  margin-top: 10px;
  color: #606266;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.history-actions {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>